<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Amaze UI Admin index Examples</title>
    <meta name="description" content="这是一个 index 页面">
    <meta name="keywords" content="index">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="assets/i/favicon.png">
    <link rel="apple-touch-icon-precomposed" href="assets/i/app-icon72x72@2x.png">
    <meta name="apple-mobile-web-app-title" content="Amaze UI" />
    <script src="assets/js/echarts.min.js"></script>
    <link rel="stylesheet" href="assets/css/amazeui.min.css" />
    <link rel="stylesheet" href="assets/css/amazeui.datatables.min.css" />
    <link rel="stylesheet" href="assets/css/app.css">
    <script src="assets/js/jquery.min.js"></script>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body data-type="widgets">
    <script src="assets/js/theme.js"></script>
    <div class="am-g tpl-g">
        <!-- 头部 -->
        <header>
            <!-- logo -->
            <div class="am-fl tpl-header-logo">
                <a href="javascript:;"><img src="assets/img/logo.png" alt=""></a>
            </div>
            <!-- 右侧内容 -->
            <div class="tpl-header-fluid">
                <!-- 侧边切换 -->
                <div class="am-fl tpl-header-switch-button am-icon-list">
                    <span>

                </span>
                </div>
                <!-- 搜索 -->
                <div class="am-fl tpl-header-search">
                    <form class="tpl-header-search-form" action="javascript:;">
                        <button class="tpl-header-search-btn am-icon-search"></button>
                        <input class="tpl-header-search-box" type="text" placeholder="搜索内容...">
                    </form>
                </div>
                <!-- 其它功能-->
                <div class="am-fr tpl-header-navbar">
                    <ul>
                        <!-- 欢迎语 -->
                        <li class="am-text-sm tpl-header-navbar-welcome">
                            <a href="javascript:;">欢迎你, <span>Amaze UI</span> </a>
                        </li>

                        <!-- 新邮件 -->
                        <li class="am-dropdown tpl-dropdown" data-am-dropdown>
                            <a href="javascript:;" class="am-dropdown-toggle tpl-dropdown-toggle" data-am-dropdown-toggle>
                                <i class="am-icon-envelope"></i>
                                <span class="am-badge am-badge-success am-round item-feed-badge">4</span>
                            </a>
                            <!-- 弹出列表 -->
                            <ul class="am-dropdown-content tpl-dropdown-content">
                                <li class="tpl-dropdown-menu-messages">
                                    <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                                        <div class="menu-messages-ico">
                                            <img src="assets/img/user04.png" alt="">
                                        </div>
                                        <div class="menu-messages-time">
                                            3小时前
                                        </div>
                                        <div class="menu-messages-content">
                                            <div class="menu-messages-content-title">
                                                <i class="am-icon-circle-o am-text-success"></i>
                                                <span>夕风色</span>
                                            </div>
                                            <div class="am-text-truncate"> Amaze UI 的诞生，依托于 GitHub 及其他技术社区上一些优秀的资源；Amaze UI 的成长，则离不开用户的支持。 </div>
                                            <div class="menu-messages-content-time">2016-09-21 下午 16:40</div>
                                        </div>
                                    </a>
                                </li>

                                <li class="tpl-dropdown-menu-messages">
                                    <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                                        <div class="menu-messages-ico">
                                            <img src="assets/img/user02.png" alt="">
                                        </div>
                                        <div class="menu-messages-time">
                                            5天前
                                        </div>
                                        <div class="menu-messages-content">
                                            <div class="menu-messages-content-title">
                                                <i class="am-icon-circle-o am-text-warning"></i>
                                                <span>禁言小张</span>
                                            </div>
                                            <div class="am-text-truncate"> 为了能最准确的传达所描述的问题， 建议你在反馈时附上演示，方便我们理解。 </div>
                                            <div class="menu-messages-content-time">2016-09-16 上午 09:23</div>
                                        </div>
                                    </a>
                                </li>
                                <li class="tpl-dropdown-menu-messages">
                                    <a href="javascript:;" class="tpl-dropdown-menu-messages-item am-cf">
                                        <i class="am-icon-circle-o"></i> 进入列表…
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <!-- 新提示 -->
                        <li class="am-dropdown" data-am-dropdown>
                            <a href="javascript:;" class="am-dropdown-toggle" data-am-dropdown-toggle>
                                <i class="am-icon-bell"></i>
                                <span class="am-badge am-badge-warning am-round item-feed-badge">5</span>
                            </a>

                            <!-- 弹出列表 -->
                            <ul class="am-dropdown-content tpl-dropdown-content">
                                <li class="tpl-dropdown-menu-notifications">
                                    <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                        <div class="tpl-dropdown-menu-notifications-title">
                                            <i class="am-icon-line-chart"></i>
                                            <span> 有6笔新的销售订单</span>
                                        </div>
                                        <div class="tpl-dropdown-menu-notifications-time">
                                            12分钟前
                                        </div>
                                    </a>
                                </li>
                                <li class="tpl-dropdown-menu-notifications">
                                    <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                        <div class="tpl-dropdown-menu-notifications-title">
                                            <i class="am-icon-star"></i>
                                            <span> 有3个来自人事部的消息</span>
                                        </div>
                                        <div class="tpl-dropdown-menu-notifications-time">
                                            30分钟前
                                        </div>
                                    </a>
                                </li>
                                <li class="tpl-dropdown-menu-notifications">
                                    <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                        <div class="tpl-dropdown-menu-notifications-title">
                                            <i class="am-icon-folder-o"></i>
                                            <span> 上午开会记录存档</span>
                                        </div>
                                        <div class="tpl-dropdown-menu-notifications-time">
                                            1天前
                                        </div>
                                    </a>
                                </li>


                                <li class="tpl-dropdown-menu-notifications">
                                    <a href="javascript:;" class="tpl-dropdown-menu-notifications-item am-cf">
                                        <i class="am-icon-bell"></i> 进入列表…
                                    </a>
                                </li>
                            </ul>
                        </li>

                        <!-- 退出 -->
                        <li class="am-text-sm">
                            <a href="javascript:;">
                                <span class="am-icon-sign-out"></span> 退出
                            </a>
                        </li>
                    </ul>
                </div>
            </div>

        </header>
        <!-- 风格切换 -->
        <div class="tpl-skiner">
            <div class="tpl-skiner-toggle am-icon-cog">
            </div>
            <div class="tpl-skiner-content">
                <div class="tpl-skiner-content-title">
                    选择主题
                </div>
                <div class="tpl-skiner-content-bar">
                    <span class="skiner-color skiner-white" data-color="theme-white"></span>
                    <span class="skiner-color skiner-black" data-color="theme-black"></span>
                </div>
            </div>
        </div>
        <!-- 侧边导航栏 -->
        <div class="left-sidebar">
            <!-- 用户信息 -->
            <div class="tpl-sidebar-user-panel">
                <div class="tpl-user-panel-slide-toggleable">
                    <div class="tpl-user-panel-profile-picture">
                        <img src="assets/img/user04.png" alt="">
                    </div>
                    <span class="user-panel-logged-in-text">
              <i class="am-icon-circle-o am-text-success tpl-user-panel-status-icon"></i>
              禁言小张
          </span>
                    <a href="javascript:;" class="tpl-user-panel-action-link"> <span class="am-icon-pencil"></span> 账号设置</a>
                </div>
            </div>

            <!-- 菜单 -->
            <ul class="sidebar-nav">
                <li class="sidebar-nav-heading">Components <span class="sidebar-nav-heading-info"> 附加组件</span></li>
                <li class="sidebar-nav-link">
                    <a href="index.html">
                        <i class="am-icon-home sidebar-nav-link-logo"></i> 首页
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="tables.html">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 表格
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="calendar.html">
                        <i class="am-icon-calendar sidebar-nav-link-logo"></i> 日历
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="form.html">
                        <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 表单

                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="chart.html">
                        <i class="am-icon-bar-chart sidebar-nav-link-logo"></i> 图表

                    </a>
                </li>

                <li class="sidebar-nav-heading">Page<span class="sidebar-nav-heading-info"> 常用页面</span></li>
                <li class="sidebar-nav-link">
                    <a href="javascript:;" class="sidebar-nav-sub-title active">
                        <i class="am-icon-table sidebar-nav-link-logo"></i> 数据列表
                        <span class="am-icon-chevron-down am-fr am-margin-right-sm sidebar-nav-sub-ico sidebar-nav-sub-ico-rotate"></span>
                    </a>
                    <ul class="sidebar-nav sidebar-nav-sub" style="display: block;">
                        <li class="sidebar-nav-link">
                            <a href="table-list.html" class="sub-active">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 文字列表
                            </a>
                        </li>

                        <li class="sidebar-nav-link">
                            <a href="table-list-img.html">
                                <span class="am-icon-angle-right sidebar-nav-link-logo"></span> 图文列表
                            </a>
                        </li>
                    </ul>
                </li>
                <li class="sidebar-nav-link">
                    <a href="sign-up.html">
                        <i class="am-icon-clone sidebar-nav-link-logo"></i> 注册
                        <span class="am-badge am-badge-secondary sidebar-nav-link-logo-ico am-round am-fr am-margin-right-sm">6</span>
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="login.html">
                        <i class="am-icon-key sidebar-nav-link-logo"></i> 登录
                    </a>
                </li>
                <li class="sidebar-nav-link">
                    <a href="404.html">
                        <i class="am-icon-tv sidebar-nav-link-logo"></i> 404错误
                    </a>
                </li>

            </ul>
        </div>

        <!-- 内容区域 -->
        <div class="tpl-content-wrapper">
            <div class="row-content am-cf">
                <div class="row">
                    <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                        <div class="widget am-cf">
                            <div class="widget-head am-cf">
                                <div class="widget-title  am-cf">症状信息录入</div>
                            </div>

                            <!-- 症状详情录入 -->                
                            <form class="am-form tpl-form-border-form tpl-form-border-br" id="sysmpType">

                                <!-- 按钮 -->
                                <div class="am-form-group am-u-sm-12">
                                    <span class="am-u-sm-3">
                                    </span>
                                    <div class="am-u-sm-7 am-u-sm-push-3">
                                        <button type="button" class="am-btn am-btn-primary tpl-btn-bg-color-success am-u-sm-5" data-am-modal-close="">取消</button>
                                        <span class="am-u-sm-2">
                                        </span>
                                        <button type="submit" href="javascript: void(0)" id="form_submit" class="am-btn am-btn-primary tpl-btn-bg-color-success am-u-sm-5" data-am-modal-close>提交</button>
                                    </div>
                                    <span class="am-u-sm-2">
                                    </span>
                                </div>

                            </form>
                        </div> 
                    </div>
                </div>                                
            </div>
        </div>
    </div>    

<!-- 图片显示模态框 -->
        <div class="am-modal am-modal-no-btn" tabindex="-1" id="sysType_enter">
            <div class="am-modal-dialog" style="width:700px;height:500px;">
                <div class="am-modal-bd">
                    <div class="row">
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                            <div class="widget am-cf">
                                <div class="widget-head am-cf">
                                    <div class="widget-title am-fl">照片显示</div>
                                    <div class="widget-function am-fr">
                                        <a href="javascript: void(0)" class="am-close am-close-spin close_a" data-am-modal-close>&times;</a>
                                    </div>
                                </div>
                                <div class="widget-body am-fr">
                                    <form class="am-form tpl-form-border-form tpl-form-border-br" >
                                        <div id="myCarousel" class="carousel slide" style="width:100%;height:100%;margin:auto;">
                                            <!-- 轮播（Carousel）项目 -->
                                            <div class="carousel-inner">
                                                <!-- <div class="item active">
                                                    <img class="firstimg"  src="" style="width:280px;height:250px;margin:auto 10px;" alt="照片">
                                                </div> -->
                                            </div>
                                            <!-- 轮播（Carousel）导航 -->
                                            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                                                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                                                <span class="sr-only">Previous</span>
                                            </a>
                                            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                                                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                                                <span class="sr-only">Next</span>
                                            </a>
                                        </div> 
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
<!-- 模态框 -->

<script src="assets/js/amazeui.min.js"></script>
<script src="assets/js/amazeui.datatables.min.js"></script>
<script src="assets/js/dataTables.responsive.min.js"></script>
<script src="assets/js/app.js"></script>

<script>
var Img_arr = new Array();

$(document).ready(function(){
    $(document).on("click","#file",function(){
    var input = $("#file");
    input.on("change", function(){
        var files = this.files;
        $.each(files,function(key,value){
            var windowURL = window.URL || window.webkitURL;
            loadImg = windowURL.createObjectURL(value);
            Img_arr.push(loadImg);
        });
    });

    input.removeAttr("id");
    var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
    $(this).append($(newInput));

    });    
});

function showphoto(){
    $(".carousel-inner").empty();
    var first_div =  `<div class="item active">
                    <img class="firstimg"  src="" style="width:660px;height:360px;margin:auto;" alt="照片">
                </div>`;
    $(".carousel-inner").append(first_div);    
    var len = Img_arr.length;
    if(len > 3){
        alert("最多不能超过三张图哦，请重新添加！");
        Img_arr = [];
        return false;
    }else if (len == 1) {
        $(".carousel-inner").find(".firstimg").attr("src",Img_arr[0]);
    }else if (len >1 && len <= 3){
        $(".carousel-inner:first-child").find(".firstimg").attr("src",Img_arr[0]);
        for (var i = 1; i <len; i++) {
            var div = `<div class="item">
                    <img src=`+Img_arr[i]+` style="width:660px;height:360px;margin:auto;" alt="照片">
                  </div>`;
            $(".carousel-inner").append(div);          
        }
    }
}
</script>

<script>
<!-- 文字录入模块 -->
function moodel_1(id){
    var div=`<div class="am-form-group am-u-md-12 am-u-lg-6">
                <label class="am-u-sm-3 am-form-label">舌体</label>
                <div class="am-u-sm-9">
                    <textarea id=`+id+` class="am-form-field tpl-form-no-bg" style="height: 100px;max-width:385px;" placeholder="请输入详情"></textarea>
                </div>
            </div>`;

    return div;
}
<!-- 图片上传模块 -->
function moodel_2(){
    var div=`<div class="am-form-group am-u-md-12 am-u-lg-6">
                <label class="am-u-sm-3 am-form-label">唇色</label>
                <div class="am-u-sm-6 am-form-file">
                    <div class="am-u-sm-12" style="max-width:130px;">
                        <button type="button" class="am-btn am-btn-danger am-btn-sm">
                        <i class="am-icon-cloud-upload"></i> 添加照片</button>
                        <input type="file" id="file" accept="image/*" capture="camera" multiple/>
                    </div>                                            
                </div>
                <div class="am-u-sm-3 am-u-md-3">
                    <a href="#" style="font-size:15px;" onclick="showphoto()" data-am-modal="{target: '#sysType_enter', closeViaDimmer: 0}">查看图片</a>
                </div>
            </div>`;

    return div;
}
<!-- 下拉框模块 -->
function moodel_3(id){
    var div=`<div class="am-form-group am-u-md-12 am-u-lg-6">
                <label class="am-u-sm-3 am-form-label">是否咳嗽</label>
                <div class="am-u-sm-9 ">                                            
                    <div class="am-u-sm-12">
                        <select id=`+id+` data-am-selected="{btnSize: 'sm'}">
                          <option value="man">是</option>
                          <option value="woman">否</option>
                        </select>
                    </div>
                </div>
            </div>`;

    return div;
}
<!-- 单选模块-2选 -->
function moodel_4(id){
    var div=`<div class="am-form-group am-u-md-12 am-u-lg-6">
                <label class="am-u-sm-3 am-form-label">咳嗽时间</label>
                <div class="am-u-sm-9 " id=`+id+`>
                    <div class="am-form-group">
                        <label class="am-radio-inline">
                            <input type="radio" name="ispre" value="1-2天"> 1-2天
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="ispre" checked="checked" value="3-4天"> 3-4天
                        </label>
                    </div>
                </div>
            </div>`;

    return div;
}
<!-- 单选模块-3选 -->
function moodel_5(id){
    var div=`<div class="am-form-group am-u-md-12 am-u-lg-6">
                <label class="am-u-sm-3 am-form-label">咳嗽时间</label>
                <div class="am-u-sm-9 " id=`+id+`>
                    <div class="am-form-group">
                        <label class="am-radio-inline">
                            <input type="radio" name="ispre" value="1-2天"> 1-2天
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="ispre" checked="checked" value="3-4天"> 3-4天
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="ispre" checked="checked" value="3-4天"> 3-4天
                        </label>
                    </div>
                </div>
            </div>`;

    return div;
}
<!-- 单选模块-4选 -->
function moodel_6(id){
    var div=`<div class="am-form-group am-u-md-12 am-u-lg-6">
                <label class="am-u-sm-3 am-form-label">咳嗽时间</label>
                <div class="am-u-sm-9 " id=`+id+`>
                    <div class="am-form-group">
                        <label class="am-radio-inline">
                            <input type="radio" name="ispre" value="1-2天"> 1-2天
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="ispre" checked="checked" value="3-4天"> 3-4天
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="ispre" checked="checked" value="3-4天"> 3-4天
                        </label>
                        <label class="am-radio-inline">
                            <input type="radio" name="ispre" checked="checked" value="3-4天"> 3-4天
                        </label>
                    </div>
                </div>
            </div>`;

    return div;
}   
</script>

<script>
// 【示例】在此定义模块的id并追加到表单中

    var text = moodel_1("text");
    $("#sysmpType").prepend(text);


    var photo = moodel_2();
    $("#sysmpType").prepend(photo);

    var select = moodel_3("select");
    $("#sysmpType").prepend(select);

    var radio1 = moodel_4("radio1");
    $("#sysmpType").prepend(radio1);

    var radio2 = moodel_5("radio2");
    $("#sysmpType").prepend(radio2);

    var radio3 = moodel_6("radio3");
    $("#sysmpType").prepend(radio3);
</script>
</body>
</html>